<template>
    <div class="register">
        <!--通用头部-->
        <Header/>
        <!--注册页面头部-->
        <div class="regist-header">
            <div class="logo">
                <h1>
                    <router-link :to="{name:'home'}" class="register">
                        <i class="iconfont tb-logo-cn"></i>
                        <i class="iconfont tb-logo-url"></i>
                    </router-link>
                </h1>
                <h2 class="tsl">用户注册</h2>
            </div>
        </div>
        <!--注册步骤条-->
        <el-steps :active="stepNum" simple process-status="process" finish-status="success"
                  style="font-weight: bolder;margin-top: 30px;">
            <el-step title="填写手机号" icon="el-icon-edit"></el-step>
            <el-step title="填写账号信息" icon="el-icon-upload"></el-step>
            <el-step title="设置支付方式" icon="el-icon-upload"></el-step>
            <el-step title="注册成功" icon="el-icon-picture"></el-step>
        </el-steps>
        <!--注册内容-->
        <div class="content">
            <!--步骤1-->
            <div class="form-list">
                <el-form :model="step1Form" v-if="stepNum === 0" :rules="step1Rules" ref="step1Form" label-width="0"
                         class="J_Form" method="post">
                    <div class="form-item">
                        <span class="form-label">手机号</span>
                        <!--地区选择器-->
                        <el-select style="float: left;width: 150px;margin-right: 5px;"
                                   v-model="step1Form.selectValue"
                                   placeholder="请选择" clearable>
                            <el-option-group
                                    v-for="group in options"
                                    :key="group.label"
                                    :label="group.label">
                                <el-option
                                        v-for="item in group.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                </el-option>
                            </el-option-group>
                        </el-select>
                        <el-form-item prop="phone" style="float: left;width: 200px;">
                            <!--手机号输入框-->
                            <el-input
                                    placeholder="请输入您的手机号"
                                    v-model="step1Form.phone"></el-input>
                        </el-form-item>
                    </div>
                    <div class="form-item">
                        <span class="form-label">验证</span>
                        <!--滑动验证-->
                        <drag-verify :width="dragParam.width"
                                     :height="dragParam.height"
                                     :text="dragParam.text"
                                     :success-text="dragParam.successText"
                                     :background="dragParam.background"
                                     :progress-bar-bg="dragParam.progressBarBg"
                                     :completed-bg="dragParam.completedBg"
                                     :handler-bg="dragParam.handlerBg"
                                     :handler-icon="dragParam.handlerIcon"
                                     :text-size="dragParam.textSize"
                                     :success-icon="dragParam.successIcon"
                                     :circle="dragParam.circle"
                                     ref="Verify"
                                     style='margin: 50px 0 0 180px;font: 10px/3.4 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif !important'>
                        </drag-verify>
                    </div>
                    <div class="form-item form-btn">
                        <button type="button" class="btn btn-larg" id="J_BtnMobileForm"
                                @click="step1Click">下一步
                        </button>
                    </div>
                </el-form>
            </div>
            <!--步骤2-->
            <el-form :model="step2Form" :rules="step2Rules" ref="step2Form" label-width="0"
                     v-if="stepNum === 1" method="post" id="J_InfoForm">
                <div class="form-group">
                    <div class="form-item">
                        <span class="form-label form-label-b tsl">登录手机号</span>
                        {{step1Form.phone}}
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <span class="form-label form-label-b tsl" data-phase-id="r_ui_enterPwdTip">请设置登录密码</span>
                        <span class="tsl">登录时验证，保护账号信息</span>
                    </div>
                    <div class="form-item">
                        <span class="form-label tsl">登录密码</span>
                        <el-form-item prop="password" style="width: 245px;">
                            <el-popover placement="top-start"
                                        title="密码格式要求"
                                        width="200"
                                        trigger="hover"
                                        content="请输入长度在 6 到 20 个由数字 或 字母 或 以下特殊字符 /+.~!@#$%^&*_-() 组成的字符">
                                <el-input slot="reference"
                                          placeholder="设置你的登录密码"
                                          id="J_Password"
                                          name="pwd"
                                          v-model="step2Form.password"
                                          clearable
                                          show-password
                                          autofocus>
                                </el-input>
                            </el-popover>
                        </el-form-item>
                    </div>

                    <div class="form-item">
                        <span class="form-label tsl">密码确认</span>
                        <el-form-item prop="passwordAg" style="width: 245px;">
                            <el-input
                                    placeholder="请再次输入你的密码" id="J_RePassword" name="confirmPwd"
                                    v-model="step2Form.passwordAg"
                                    clearable show-password>
                            </el-input>
                        </el-form-item>

                    </div>
                </div>
                <div class="form-group">
                    <div class="form-item">
                        <span class="form-label form-label-b tsl" data-phase-id="r_ui_enterUserNameTip">设置会员名</span>
                    </div>
                    <div class="form-item">
                        <span class="form-label tsl" data-phase-id="r_p_userName">登录名</span>
                        <el-form-item prop="username" style="width: 245px;">
                            <el-popover placement="top-start"
                                        title="用户名格式要求"
                                        width="200"
                                        trigger="hover"
                                        content="请输入长度在 3 到 20 个由数字 或 字母 或 _-  的字符。">
                                <el-input slot="reference"
                                          placeholder="会员名一旦设置成功，无法修改" id="J_Nick" autocomplete="off"
                                          v-model="step2Form.username"
                                          clearable>
                                </el-input>
                            </el-popover>
                        </el-form-item>
                        <div class="nick-suggest-container">
                            <div class="nick-suggest" id="J_NickSuggest"></div>
                        </div>

                    </div>
                    <div class="form-item">
                        <button type="button" id="J_BtnInfoForm" class="btn btn-large tsl" @click="step2FormSubmit">
                            提交
                        </button>
                        <div class="msg">
                            <i class="iconfont"></i>
                            <div class="msg-cnt"></div>
                        </div>
                    </div>
                </div>
            </el-form>
            <!--步骤3-->
            <el-form :model="step3Form" :rules="step3Rules" ref="step3Form" label-width="0"
                     v-if="stepNum === 2" method="post" class="ui-form">
                <div class="form-list">
                    <div class="form-item">
                        <span class="form-label">银行卡号</span>
                        <el-form-item prop="bankCard" style="width: 300px;float: left;">
                            <el-input
                                    placeholder="请输入银行卡号"
                                    v-model="step3Form.bankCard"
                                    clearable autofocus>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="form-item">
                        <span class="form-label">持卡人姓名</span>
                        <el-form-item prop="name" style="width: 300px;float: left;">
                            <el-input
                                    placeholder="请输入持卡人姓名"
                                    v-model="step3Form.name"
                                    clearable>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="form-item">
                        <span class="form-label">证件</span>
                        <el-select v-model="step3Form.cardValue" placeholder="请选择"
                                   style="width: 100px;margin-right: 10px;float: left"
                                   value="">
                            <el-option-group
                                    v-for="group in step3Form.cardOptions"
                                    :key="group.label"
                                    :label="group.label">
                                <el-option
                                        v-for="item in group.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-option-group>
                        </el-select>
                        <el-form-item prop="idCard" style="width: 190px;float: left;">
                            <el-input
                                    placeholder="请输入证件号"
                                    v-model="step3Form.idCard"
                                    clearable
                                    maxlength="30">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="form-item">
                        <span class="form-label">手机号码</span>
                        <el-form-item prop="phone" style="width: 185px;margin-right: 5px;float: left;">
                            <el-input
                                    placeholder="此卡在银行预留手机号"
                                    v-model="step3Form.phone"
                                    clearable
                                    maxlength="20">
                            </el-input>
                        </el-form-item>
                        <el-button plain>获取校检码</el-button>
                    </div>
                    <div class="form-item">
                        <span class="form-label"></span>
                        <el-button type="primary" style="margin-right: 20px;" @click="step3FormSubmit">同意协议并确定
                        </el-button>
                        <a @click="step3SkipToNext">跳过，到下一步</a>
                    </div>
                    <div class="form-item">
                        <span class="form-label"></span>
                        <div class="item agreements">
                            查看
                            <a href="javascript:;" @click="$store.dispatch('invalidBtnAlertAction')">
                                《快捷支付服务相关协议》
                            </a>
                        </div>
                    </div>
                </div>
            </el-form>
            <!--步骤4-->
            <form v-if="stepNum === 4" class="ui-form">
                <div class="form-list" style="font-size: 20px;">
                    <span>恭喜你注册成功 ！ 现在就可以前往登录了 ！</span>
                    <router-link :to="{ name: 'login'}" tag="a" class="toLoginBtn">走，登录去</router-link>
                </div>
            </form>
        </div>
        <!--手机验证-->
        <div v-if="phoneCodeBoxShow" class="ks-dialog" id="J_MobileCheck"
             style="left: 589.5px; top: 217px; display: block;">
            <div class="ks-dialog-content">
                <a class="ks-dialog-close ks-overlay-close" @click="closePhoneCodeBox">
                    <span class="el-icon-close close-btn" style="font-weight: bolder;font-size: 25px;"></span>
                </a>
                <div class="ks-dialog-header">
                    <h3 class="tsl" data-phase-id="r_p_fillCheckcode">验证手机</h3>
                    <div class="msg tsl msg-display-block msg-type-info" id="J_MsgCodeTitle">
                        <div class="msg-cnt">
                            <i class="el-icon-warning" style="color:rgb(0,191,255)"></i>
                            校验码已发送到你的手机，15分钟内输入有效，请勿泄漏
                        </div>
                    </div>
                </div>
                <div class="ks-dialog-body">
                    <el-form :model="sendPhoneCodeForm" :rules="phoneCodeRules" ref="phoneCodeForm" label-width="0"
                             class="J_Form" method="post">
                        <div class="form-list">
                            <div class="form-group">
                                <div class="form-item">
                                    <span class="form-label tsl" data-phase-id="r_p_mobileNum">手机号</span>
                                    <span id="J_MobileNumber">{{step1Form.phone}}</span>
                                </div>
                                <div class="form-item">
                                    <span class="form-label tsl" data-phase-id="r_p_checkcode">验证码</span>
                                    <el-form-item prop="phoneCode" style="width: 115px;float: left;margin-right: 3px">
                                        <el-input v-model="sendPhoneCodeForm.phoneCode" name="code" maxlength="4"
                                                  placeholder="请输入验证码"
                                                  class="form-text" style="width: 115px;margin-right: 5px;"></el-input>
                                    </el-form-item>
                                    <el-button :disabled="sendPhoneCodeForm.sending" icon="el-icon-message"
                                               @click="sendPhoneCode">
                                        {{sendPhoneCodeForm.text}}
                                    </el-button>
                                    <div class="msg msg-type-ok msg-display-block" id="J_MsgResendCode">
                                        <div class="msg-cnt" v-if="sendPhoneCodeForm.isSuccess !== ''">
                                            <i :class="sendPhoneCodeForm.isSuccess ? 'el-icon-success' : 'el-icon-error'"
                                               style="color:rgb(107,200,39);font-size: 15px; "></i>
                                            {{sendPhoneCodeForm.fallback||'校验码已发送至你的手机，请查收'}}
                                        </div>
                                    </div>
                                </div>
                                <div class="form-item">
                                    <button id="J_BtnMobileCodeForm" class="btn btn-normal tsl"
                                            type="button"
                                            @click="step1PhoneCodeClick">确认
                                    </button>
                                </div>

                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
        <!--进入前注册协议同意-->
        <div v-if="protocolShow" class="ks-rule-dialog" id="J_AgreementDialog">
            <div class="ks-rule-dialog-content">
                <a target="_top" class="ks-close-btn" @click="closeRule">
                    <span class="el-icon-close" style="font-weight: bolder;font-size: 25px;"></span>
                </a>
                <div class="ks-dialog-header">

                    <h3>注册协议</h3>

                </div>

                <div class="ks-dialog-body">

                    <p><strong>【审慎阅读】</strong>您在申请注册流程中点击同意前，应当认真阅读以下协议。<strong style="text-decoration: underline">请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：</strong>
                    </p>

                    <p>1、<strong style="text-decoration: underline">与您约定免除或限制责任的条款；</strong></p>

                    <p>2、<strong style="text-decoration: underline">与您约定法律适用和管辖的条款；</strong></p>

                    <p>3、<strong style="text-decoration: underline">其他以粗体下划线标识的重要条款。</strong></p>

                    <p>如您对协议有任何疑问，可向平台客服咨询。</p>

                    <p><strong>【特别提示】</strong>当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。如您因平台服务与淘宝发生争议的，适用《淘宝平台服务协议》处理。如您在使用平台服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。
                    </p>

                    <p><strong style="text-decoration: underline">阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。</strong></p>


                    <p><a href="javascript:;" @click="$store.dispatch('invalidBtnAlertAction')"
                          target="_blank">淘宝平台服务协议</a></p>

                    <p>
                        <a href="javascript:;" @click="$store.dispatch('invalidBtnAlertAction')"
                           target="_blank">隐私权政策</a></p>

                    <p>
                        <a href="javascript:;" @click="$store.dispatch('invalidBtnAlertAction')"
                           target="_blank">法律声明</a></p>

                    <p><a href="javascript:;" target="_blank" @click="$store.dispatch('invalidBtnAlertAction')">支付宝及客户端服务协议</a>
                    </p>


                    <p style="text-align: center">

                        <button @click="agreementBtnClick" class="btn btn-large" type="button"
                                id="J_AgreementBtn">同意协议
                        </button>

                    </p>

                </div>
            </div>
        </div>
        <!--蒙版效果-->
        <div class="masking" v-show="maskShow"></div>
        <Footer/>
    </div>
</template>

<script>
    import Header from "../../components/Header";
    import Footer from "../../components/Footer";
    import {Message} from 'element-ui';
    import dragVerify from 'vue-drag-verify'
    import {validatePwdRule} from "../../utils/validate"
    import {validateUsername, validatePhoneNum, register, sendRegisterPhoneCode, checkPhoneCode} from "../../api/user"

    export default {
        name: "Register",
        components: {
            Header, Footer, dragVerify
        },
        data() {
            /*再次密码输入验证*/
            const validatePwdAgRule = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.step2Form.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
            /*手机号校验*/
            const validatePhoneNumRule = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入您的手机号'));
                } else if (!/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/.test(value)) {
                    callback(new Error('手机号格式不对！'));
                } else {
                    /*发送请求*/
                    validatePhoneNum(this.step1Form.phone)
                        .then((data) => {
                            if (data.code === 20000) {
                                callback();  // 一定要有，这是表单校验成功后的回调，会返回一个boolean值，即true
                            } else {
                                callback(new Error(data.message))
                            }
                        })
                }
            }
            /*用户名校验*/
            const validateUsernameRule = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else if (!/^[a-zA-Z0-9-_]{3,20}$/.test(value)) {
                    callback(new Error('用户名格式不对！'));
                } else {
                    /*发送请求*/
                    validateUsername(this.step2Form.username)
                        .then((data) => {
                            if (data.code === 20000) {
                                callback();  // 一定要有，这是表单校验成功后的回调，会返回一个boolean值，即true
                            } else {
                                callback(new Error(data.message))
                            }
                        })
                }
            }
            /*手机验证码校验*/
            const validatePhoneCodeRule = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入手机验证码'));
                } else if (!/^[0-9]{4}$/.test(value)) {
                    callback(new Error('手机验证码格式不对！'));
                } else {
                    /*发送请求*/
                    checkPhoneCode(this.step1Form.phone, this.sendPhoneCodeForm.phoneCode)
                        .then((data) => {
                            if (data.code === 20000) {
                                callback();  // 一定要有，这是表单校验成功后的回调，会返回一个boolean值，即true
                            } else {
                                callback(new Error(data.message))
                            }
                        })
                }
            }

            return {
                /*步骤1 手机号码 表单*/
                step1Form: {
                    /*地区选择器显示数据*/
                    selectValue: '中国大陆',
                    /*手机号输入*/
                    phone: '13692450545',
                },
                /*步骤1 手机号码 表单 规则*/
                step1Rules: {
                    phone: [
                        {validator: validatePhoneNumRule, trigger: 'blur'},
                    ],
                },
                /*步骤1 手机验证码 表单*/
                sendPhoneCodeForm: {
                    phoneCode: '1234',
                    sending: false,// 发送中
                    text: "免费获取验证码",// 文字提示
                    timer: '', //定时器
                    isSuccess: '', //是否发送成功
                    fallback: '',// 错误反馈
                },
                /*步骤1 手机验证码  表单 规则*/
                phoneCodeRules: {
                    phoneCode: [
                        {validator: validatePhoneCodeRule, trigger: 'blur'},
                    ],
                },
                /*步骤1 地区选择器数据*/
                options: [
                    {
                        label: '热门地区',
                        options: [
                            {
                                value: '+86',
                                label: '中国大陆'
                            }, {
                                value: '+852',
                                label: '中国香港'
                            }, {
                                value: '+886',
                                label: '中国台湾'
                            }, {
                                value: '+853',
                                label: '中国澳门'
                            }
                        ]
                    },
                    {
                        label: '国家名',
                        options: [
                            {
                                value: '+1',
                                label: '美国'
                            },
                            {
                                value: '+1',
                                label: '加拿大'
                            }, {
                                value: '+61',
                                label: '澳大利亚'
                            }, {
                                value: '+64',
                                label: '新西兰'
                            }
                        ]
                    }
                ],
                /*步骤2 表单*/
                step2Form: {
                    password: '123456',
                    passwordAg: '123456',
                    username: 'xsf8', /*会员名输入*/
                },
                /*步骤2 表单 规则*/
                step2Rules: {
                    password: [
                        {validator: validatePwdRule, trigger: 'blur'}
                    ],
                    passwordAg: [
                        {validator: validatePwdAgRule, trigger: 'blur'}
                    ],
                    username: [
                        {validator: validateUsernameRule, trigger: 'blur'}
                    ],
                },
                /*步骤3 表单*/
                step3Form: {
                    bankCard: '',/*银行卡卡号*/
                    name: '',/*持卡人姓名*/
                    idCard: '', /*证件输入*/
                    phone: '', /*手机号输入*/
                    /*证件类型*/
                    cardOptions: [{
                        label: '常用',
                        options: [{
                            value: '1',
                            label: '身份证'
                        }]
                    }],
                    /*证件类型默认值*/
                    cardValue: "身份证"
                },
                /*步骤3 表单 规则*/
                step3Rules: {
                    bankCard: [
                        {required: true, message: '请输入银行卡卡号', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '请输入持卡人姓名', trigger: 'blur'},
                    ],
                    idCard: [
                        {required: true, message: '请输入证件', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                    ],
                },
                /*滑动验证框*/
                dragParam: {
                    /*
                            名称 | 类型 | 默认值 | 说明
                            --- | --- | --- | ---
                            width | Number | 200 | 组件的宽度
                            height | Number | 60 | 组件的高度
                            text | String | swiping to the right side | 提示信息文字
                            successText | String | success | 验证通过时的提示信息文字
                            background | String | #ccc | 组件背景色
                            color | String | #ffffff | 组件文字颜色
                            progressBarBg | String | #FFFF99 | 拖拽过程中的背景颜色
                            completedBg | String | #66cc66 | 验证成功的背景颜色
                            circle | Boolean | true | 设为true,组件为圆形按钮，否则为长方形
                            handlerIcon | String | - | 拖拽按钮的icon
                            successIcon | String | - | 验证通过时拖拽按钮的icon
                            handlerBg | String | #fff | 拖拽按钮的背景色
                            textSize | String | 20px | 组件的文字大小
                    */
                    circle: false, /*圆角*/
                    text: '请按住滑块，拖动到最右边',
                    width: 300,
                    height: 40,
                    textSize: "12px",
                    successText: '验证通过',   /*成功提示*/
                    progressBarBg: "rgb(122,196,40)",/*进度条背景色*/
                    completedBg: 'rgb(122,196,60)',/*完成后背景色*/
                    handlerBg: "#fff",
                    handlerIcon: 'el-icon-d-arrow-right',
                    successIcon: 'el-icon-check'
                },
                /*手机注册验证码盒子隐藏显示*/
                phoneCodeBoxShow: false,
                /*蒙版效果开关*/
                maskShow: true,
                /*进入页面前协议同意板块开关*/
                protocolShow: true,
                /*步骤下标*/
                stepNum: 0,
            }
        },
        methods: {
            /*关闭协议窗口*/
            closeRule() {
                Message.error('注册失败，请同意并遵守注册协议！')
                /*编程式导航*/
                this.$router.push({name: 'home'})
            },
            /*步骤1 - 手机号码*/
            step1Click() {
                this.$refs['step1Form'].validate((valid) => {
                    if (valid) {
                        this.phoneCodeBoxShow = true
                        this.maskShow = true
                    } else {
                        return false;
                    }
                });
            }
            ,
            /*步骤1 - 关闭手机验证码盒子*/
            closePhoneCodeBox() {
                this.phoneCodeBoxShow = false
                this.maskShow = false
            }
            ,
            /*步骤1 - 同意协议*/
            agreementBtnClick() {
                this.protocolShow = false
                this.maskShow = false
            }
            ,
            /*步骤1 - 手机验证码 表单提交*/
            step1PhoneCodeClick() {
                this.$refs['phoneCodeForm'].validate((valid) => {
                    if (valid) {
                        this.maskShow = false
                        this.phoneCodeBoxShow = false
                        this.stepNum = 1
                    } else {
                        return false;
                    }
                });
            }
            ,
            /*步骤1 - 发送手机验证码*/
            sendPhoneCode() {
                let second = 60
                this.sendPhoneCodeForm.sending = true
                this.sendPhoneCodeForm.timer = setInterval(() => {
                    second--
                    this.sendPhoneCodeForm.text = `${second}s后重新发送`
                    if (second === 0) {
                        clearInterval(this.sendPhoneCodeForm.timer)
                        this.sendPhoneCodeForm.text = '免费获取验证码'
                        this.sendPhoneCodeForm.sending = false
                    }
                }, 1000)
                /*发送请求*/
                sendRegisterPhoneCode(this.step1Form.phone)
                    .then((data) => {
                        if (data.code === 20000) {
                            this.sendPhoneCodeForm.isSuccess = true
                            this.sendPhoneCodeForm.fallback = ''
                        } else {
                            this.sendPhoneCodeForm.isSuccess = false
                            this.sendPhoneCodeForm.fallback = data.message
                        }
                    })
            }
            ,
            /*步骤2 - 表单提交*/
            step2FormSubmit() {
                this.$refs['step2Form'].validate(valid => {
                    if (valid) {
                        // 注册参数
                        let postData = {
                            'username': this.step2Form.username,
                            'phone': this.step1Form.phone,
                            'password': this.step2Form.password,
                            'code': this.sendPhoneCodeForm.phoneCode
                        }
                        /*发送请求*/
                        register(postData)
                            .then(() => {
                                this.stepNum = 2
                            })
                    } else {
                        return false;
                    }
                });
            }
            ,
            /*步骤3 - 跳过*/
            step3SkipToNext() {
                this.stepNum = 4
                Message.success('恭喜你，注册成功！')
            }
            ,
            /*步骤3 - 同意并下一步*/
            step3FormSubmit() {
                this.$refs['step3Form'].validate((valid) => {
                    if (valid) {
                        this.stepNum = 4
                        Message.success('恭喜你，注册成功！')
                    } else {
                        return false;
                    }
                });
            }
            ,
        },
    }
</script>

<style lang="less" scoped>
    * {
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }

    .register {
        width: 1190px;
        margin: 0 auto;
        color: #3c3c3c;

        /*注册页面头部*/

        .regist-header {
            position: relative;
            height: 43px;
            padding: 20px 0;
            margin-top: 46px;

            .logo {
                display: inline-block;
                zoom: 1;
            }

            h1 {
                display: block;
                float: left;
                zoom: 1;
                width: 110px;
                height: 44px;
                vertical-align: middle;
                font-size: 18px;

                a {
                    text-decoration: none;
                    display: block;
                    color: #f40;
                    height: 45px;
                    width: 110px;
                    background-image: url("../../assets/login_logo.png");
                }
            }

            h2 {
                display: inline-block;
                zoom: 1;
                *display: inline;
                height: 43px;
                line-height: 43px;
                margin-left: 6px;
                font-size: 22px;
                font-weight: 400;
                vertical-align: middle;
            }
        }

        /*注册页面内容*/

        .content {
            padding: 50px 0;

            .form-list {
                width: 720px;
                margin: 0 auto;
                font-size: 14px;

                /*1.设置用户名*/

                .form-item {
                    height: 40px;

                    .form-label {
                        display: inline;
                        margin-right: 40px;
                        float: left;
                        margin-left: -100px;
                        width: 240px;
                        height: 37px;
                        line-height: 37px;
                        text-align: right;
                    }

                }

                .form-btn {
                    margin: 50px 0 0 180px;

                    /*下一步按钮*/

                    .btn-larg {
                        display: inline-block;
                        min-width: 180px;
                        zoom: 1;
                        height: 36px;
                        line-height: 36px;
                        padding: 0 20px;
                        color: #FFF;
                        font-weight: 700;
                        font-size: 16px;
                        text-align: center;
                        background-color: #ff4001;
                        border: 0;
                        border-radius: 3px;
                        cursor: pointer;
                    }
                }

            }

            /*步骤2 填写用户信息*/

            #J_InfoForm {
                .form-group {
                    padding: 10px 0 10px 260px;

                    .form-item {
                        padding: 10px 0 10px 260px;
                        line-height: 36px;
                        zoom: 1;

                        .form-label {
                            display: inline;
                            float: left;
                            margin-left: -260px;
                            width: 240px;
                            height: 37px;
                            line-height: 37px;
                            text-align: right;
                        }

                        .form-label-b {
                            font-weight: 700;
                        }
                    }

                    .form-item:after {
                        content: "";
                        display: block;
                        clear: both;
                        visibility: hidden;
                        height: 0;

                    }
                }
            }

            /*步骤3 设置支付方式*/

            .ui-form {
                border: 1px solid #d2d2d2;
                position: relative;
                padding: 30px 0;

                .form-item {
                    margin-top: 30px;

                }

                a {
                    color: #09c;
                    text-decoration: none;
                    cursor: pointer;
                }

                a:hover {
                    text-decoration: underline;
                    color: rgb(255, 71, 0);
                }
            }
        }

        /*手机验证*/

        .ks-dialog {
            width: 680px;
            margin: 0 auto;
            padding: 20px;
            color: #3e3e3e;
            border: 2px solid #dedede;
            border-top: 2px solid #ff4a00;
            background-color: #FFF;
            position: absolute;
            z-index: 999999;

            .ks-dialog-content {
                /*关闭窗口*/

                a {
                    display: inline-block;
                    zoom: 1;
                    width: 24px;
                    height: 24px;
                    font-size: 24px;
                    text-align: center;
                    line-height: 24px;
                    color: #DDD;
                    text-decoration: none;
                    position: absolute;
                    top: 20px;
                    right: 20px;

                    span {
                        font-weight: bolder;
                    }

                    span:hover {
                        color: #ff4700;
                        cursor: pointer;
                    }
                }

                a:hover {
                    color: rgb(255, 71, 0);
                }

                .ks-dialog-header {
                    font-size: 14px;
                    color: #3e3e3e;

                    h3 {
                        display: block;
                        margin-block-start: 1em;
                        margin-block-end: 1em;
                        margin-inline-start: 0;
                        margin-inline-end: 0;
                        font-weight: bold;
                    }
                }

                /*表单*/

                .form-list {
                    margin: 0 auto;
                    font-size: 14px;

                    .form-group {
                        padding: 10px 0;

                        .form-item {
                            padding: 10px 0 10px 260px;
                            line-height: 36px;
                            zoom: 1;

                            .form-label {
                                display: inline;
                                float: left;
                                margin-left: -260px;
                                width: 240px;
                                height: 37px;
                                line-height: 37px;
                                text-align: right;
                            }

                            .msg {
                                font-size: 12px;
                                line-height: 1.4;
                                color: #3e3e3e;
                                display: block;
                                margin-top: 30px;
                            }

                            .btn-normal {
                                min-width: 100px;
                            }
                        }
                    }

                }
            }
        }

        .btn {
            display: inline-block;
            zoom: 1;
            height: 36px;
            line-height: 36px;
            padding: 0 20px;
            color: #FFF;
            font-weight: 700;
            font-size: 16px;
            text-align: center;
            background: #ff4001;
            border: 0;
            border-radius: 3px;
            cursor: pointer;
        }

        .btn-large {
            min-width: 180px;
        }

        .btn:hover {
            color: #FFF !important;
            text-decoration: none;
            background-color: #f73500 !important;
        }

        /*蒙版效果*/

        .masking {
            width: 100%;
            left: 0;
            top: 0;
            height: 100%;
            position: fixed;
            user-select: none;
            z-index: 999;
        }

        /*进入前注册协议同意*/

        .ks-rule-dialog {
            font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', \5b8b\4f53, sans-serif !important;

            width: 680px;
            margin: 0 auto;
            padding: 20px;
            color: #3e3e3e;
            border: 2px solid #dedede;
            border-top: 2px solid #ff4a00;
            background-color: #FFF;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 999999;

            .ks-rule-dialog-content {
                p {
                    font-size: 12px;
                    display: block;

                    a {
                        font-weight: 700;
                        font-size: 14px;
                        color: #ff5b20;
                        text-decoration: none;
                        cursor: pointer;
                    }
                }

                strong {
                    color: #000;
                    font-weight: 700;
                }

                /*关闭按钮*/

                .ks-close-btn {
                    display: inline-block;
                    zoom: 1;
                    width: 24px;
                    height: 24px;
                    font-size: 24px;
                    text-align: center;
                    line-height: 24px;
                    color: #DDD;
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    cursor: pointer;
                }

                .ks-close-btn:hover {
                    color: rgb(255, 71, 0);
                }

                .ks-dialog-header {
                    font-size: 14px;

                    h3 {
                        font-size: 16px;
                    }
                }

                .ks-dialog-body {
                    p {
                        margin-top: 8px;
                        margin-left: 5px;
                        font-size: 14px;
                    }

                    a:hover {
                        color: #ff5b20;
                        text-decoration: underline;
                    }
                }
            }
        }
    }
</style>